<template>
    <view class="wrap">
        <view class="add" v-if="list.length == 0">
            <image src="../../static/images/common/empty.png" mode="scaleToFill" />
        </view>
        <view class="address" v-for="(item, index) in list" :key="index">
            <view class="message">
                <text class="username">{{ item.name }}</text>
                <text class="userTal">{{ item.tel }}</text>
            </view>
            <view class="useraddress">
                {{ item.addr_text }}
            </view>
            <view class="operation">
                <view class="default" @click="defaults(item, index)">
                    <u-icon name="checkmark-circle" :color="item.is_default ? '#fdd100' : '#ccc'" size="20"></u-icon>
                    <text>默认地址</text>
                </view>
                <view class="compile">
                    <u-icon name="edit-pen" color="#ccc" size="20"></u-icon>
                    <text @click="compile(item._id)">编辑</text>
                </view>
                <view class="delete" @click="show = true">
                    <u-icon name="trash" color="#ccc" size="20"></u-icon>
                    <text>删除</text>
                </view>
                <u-modal :show="show" :title="title" showConfirmButton showCancelButton @confirm="confirm(item._id)"
                    @cancel="cancel">
                    <view class="slot-content">
                        <rich-text :nodes="content"></rich-text>
                    </view>
                </u-modal>
            </view>
        </view>
        <view class="addaddress" @click="add_address">
            +添加收货地址
        </view>
    </view>
</template>

<script>
import { get_AddrList, get_set_defult_add, get_del_addr } from '../../api/order'
export default {
    data() {
        return {
            uid: uni.getStorageSync('uid'),
            list: [],
            show: false,
            title: '提示',
            content: `确定删除吗`
        };
    },
    onLoad(options) {
        console.log(options)
    },
    mounted() {
        get_AddrList({ uid: this.uid },
            { token: uni.getStorageSync('token') }).then(res => {
                console.log(res)
                this.list = res.data.reverse()
            })
    },
    methods: {
        //设置默认

        defaults(item, index) {
            let _id = item._id
            console.log(item)
            get_set_defult_add({
                uid: this.uid,
                _id: _id
            }, { token: uni.getStorageSync('token') }).then(res => {
                if (res.code == 1) {
                    this.list.forEach(v => {
                        v.is_default = false
                    });
                    this.list[index].is_default = true
                }
            })

        },
        //删除 模态框 确定
        confirm(_id) {
            //删除地址
            get_del_addr({
                uid: this.uid,
                _id: _id
            }, { token: uni.getStorageSync('token') }).then(res => {
                if (res.code == 1) {
                    this.show = false
                    setTimeout(() => {
                        uni.redirectTo({
                            url: '/pages/address/address'
                        });
                    }, 500)
                }
            })
        },
        //删除模态框 取消
        cancel() {
            this.show = false
        },
        //新增地址
        add_address() {
            uni.navigateTo({ url: '/pages/address/addressManage' })
        },
        compile(id) {
            let addr_id = id
            uni.navigateTo({ url: '/pages/address/addressManage?addr_id=' + addr_id })

        }
    }
};

</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;

    .add {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 100px;

        image {
            width: 100px;
            height: 100px;

        }
    }

    .address {
        width: 90%;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 1px 2px 20px 0px #ccc;

        .message {
            width: 100%;
            padding: 10px 0 10px 10px;

            .username {
                font-size: 18px;
                font-weight: 500;
            }

            .userTal {
                margin-left: 10px;
            }
        }

        .useraddress {
            padding-left: 10px;
            font-size: 18px;
            color: #909090;
            padding-bottom: 20px;

            border-bottom: 1px solid #e4dede;
        }

        .operation {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 10px 0;

            .default {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 33%;
            }

            .compile {
                @extend .default
            }

            .delete {
                @extend .default
            }

        }
    }

    .addaddress {
        width: 80%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: chartreuse;
        font-size: 18px;
        background-color: #fff;
        margin: 20px auto;
        border-radius: 10px;
    }
}
</style>